<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <!--
    本案例实现了一个小型“计算器”的代码。

    (未考虑部分不合理情况： 直接输入+-*/=的情况 )
    -->


    <script type="text/javascript"
            src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <style type="text/css">
        #container {
            border: 1px solid gray;
            display: inline-block;
            margin-left: 100px;
            background-color: #EAECF3;
        }

        #showContent {
            width: 266px;
            height: 54px;
            display: inline-block;
            border-radius: 16px;
            font-size: 25px;
            font-weight: bold;
            text-align: right;
            background-color: white;
        }

        tr td input {
            width: 66px;
            height: 54px;
            display: inline-block;
            font-size: 30px;
            border-radius: 16px;
            background-color: #E2E4EF;
            border: 0px;
        }

        #ac {
            background-color: #FFA80E;
        }

        #equals {
            background-color: red;
        }
    </style>


</head>
<body>

<div id="container">
    <table>
        <tr>
            <th colspan="4"><input id="showContent" type="text"
                                   disabled="disabled" value="0"/></th>
        </tr>
        <tr>
            <td><input type="button" value="1"/></td>
            <td><input type="button" value="2"/></td>
            <td><input type="button" value="3"/></td>
            <td><input id="ac" type="button" value="AC"/></td>
        </tr>
        <tr>
            <td><input type="button" value="4"/></td>
            <td><input type="button" value="5"/></td>
            <td><input type="button" value="6"/></td>
            <td><input id="equals" type="button" value="="/></td>
        </tr>
        <tr>
            <td><input type="button" value="7"/></td>
            <td><input type="button" value="8"/></td>
            <td><input type="button" value="9"/></td>
            <td><input type="button" value="0"/></td>
        </tr>
        <tr>
            <td><input type="button" value="+"/></td>
            <td><input type="button" value="-"/></td>
            <td><input type="button" value="*"/></td>
            <td><input type="button" value="/"/></td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    $("tr td input").each(function () {

        $(this).mouseenter(function () {
            $(this).css("background-color", "#D9DCE8");
        });

        $(this).mouseleave(function () {
            if ($(this).attr("id") == "ac") {
// 			如果是ac按钮
                $(this).css("background-color", "#FFA80E");
            } else if ($(this).attr("id") == "equals") {
// 			如果是=按钮
                $(this).css("background-color", "red");
            } else {
                $(this).css("background-color", "#E2E4EF");
            }
        });


        $(this).click(function () {
            if ($(this).attr("id") == "ac") {
                //如果是ac按钮
                $("#showContent").val(0);
            } else if ($(this).attr("id") == "equals") {
                //如果是=按钮，触发表达式的计算
                $("#showContent").val($("#showContent").val());
                result = eval($("#showContent").val());
                $("#showContent").val(result)
            } else {
                if ($("#showContent").val() == '0') {
                    //如果一开始就是0,那么就把第一个0截取掉
                    $("#showContent").val("");
                }

                value = $(this).val();
                expr = $("#showContent").val() + value;
                $("#showContent").val(expr);

            }
        });
    });

</script>

</body>
</html>